// This file has lots of modifiers and is somewhat nesty by nature
//sass-lint:disable nesting-depth

// Our base button
.euiButton {
  @include euiButton;
  @include euiSlightShadow;

  border-radius: $euiBorderRadius;
  min-width: $euiButtonMinWidth;

  .euiButton__content {
    @include euiButtonContent;

    padding: 0 ($euiSize - $euiSizeXS);
  }

  .euiButton__text {
    text-overflow: ellipsis;
    overflow: hidden;
  }

  &.euiButton--small {
    height: $euiButtonHeightSmall;
    line-height: $euiButtonHeightSmall; // prevents descenders from getting cut off
  }

  &.euiButton--iconRight {
    .euiButton__content {
      @include euiButtonContent($isReverse: true);
    }
  }

  &:hover,
  &:active {
    @include euiSlightShadowHover;
  }

  &:enabled {
    &:hover,
    &:focus {
      background-color: transparentize($euiColorPrimary, .9);
    }
  }

  &:disabled {
    color: $euiButtonColorDisabledText;
    border-color: $euiButtonColorDisabled;
    pointer-events: none;

    .euiButton__content {
      pointer-events: auto;
      cursor: not-allowed;
    }

    .euiButton__spinner {
      border-color: euiLoadingSpinnerBorderColors(currentColor);
    }

    &.euiButton--fill {
      // Only increase the contrast of background color to text to 2.0 for disabled
      color: makeHighContrastColor($euiButtonColorDisabled, $euiButtonColorDisabled, 2);
      background-color: $euiButtonColorDisabled;
      border-color: $euiButtonColorDisabled;

      &:hover,
      &:focus {
        background-color: $euiButtonColorDisabled;
        border-color: $euiButtonColorDisabled;
      }
    }

    &:hover,
    &:focus {
      @include euiSlightShadow;

      text-decoration: none;
    }
  }
}

// Create button modifiers based upon the map.
@each $name, $color in $euiButtonTypes {
  .euiButton--#{$name} {
    @if ($name == 'ghost') {
      // Ghost is unique and ALWAYS sits against a dark background.
      color: $color;
    } @else if ($name == 'text') {
      // The default color is lighter than the normal text color, make the it the text color
      color: $euiTextColor;
    } @else {
      // Other colors need to check their contrast against the page background color.
      color: makeHighContrastColor($color, $euiPageBackgroundColor);
    }

    border-color: $color;

    &.euiButton--fill {
      background-color: $color;
      border-color: $color;

      // The function makes that hexes safe for theming
      $fillTextColor: chooseLightOrDarkText($color, $euiColorGhost, $euiColorInk);

      color: $fillTextColor;

      &:enabled {
        &:hover,
        &:focus {
          background-color: darken($color, 5%);
          border-color: darken($color, 5%);
        }
      }
    }

    &:enabled {
      $shadowColor: $euiShadowColor;
      @if ($name == 'ghost') {
        $shadowColor: $euiColorInk;
      } @else if (lightness($euiTextColor) < 50) {
        // Only if this is the light theme do we use the button variant color to colorize the shadow
        $shadowColor: desaturate($color, 60%);
      }

      @include euiSlightShadow($shadowColor);

      &:hover,
      &:focus {
        @include euiSlightShadowHover($shadowColor);
        background-color: transparentize($color, .9);

        @if ($name == 'disabled') {
          cursor: not-allowed;
        }
      }
    }
  }
}

// Fix ghost/disabled look specifically
.euiButton:disabled.euiButton--ghost {
  &,
  &:hover,
  &:focus {
    @include euiSlightShadow($euiColorInk);
    color: $euiButtonColorGhostDisabled;
    border-color: $euiButtonColorGhostDisabled;
  }

  &.euiButton--fill {
    background-color: $euiButtonColorGhostDisabled;
    color: makeHighContrastColor($euiButtonColorGhostDisabled, $euiButtonColorGhostDisabled, 2);
  }
}

.euiButton--fullWidth {
  display: block;
  width: 100%;
}
